<template>
  <div class="detail-data">
    <el-tabs v-model="activeName">
      <!-- 血压历史状态 -->

      <el-tab-pane label="血压历史状态" name="1">
        <div class="title">
          <div class="label">选择时间：</div>
          <el-date-picker
            v-model="value"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
          <el-button type="primary" class="search-btn" @click="search"
            >查询</el-button
          >
        </div>

        <Bp :device="this.device" style="width: 80%" />
        <div>
          <el-table :data="bpalarm" style="width: 70%">
            <el-table-column prop="alarmUpbp" label="上压" width="180">
            </el-table-column>
            <el-table-column prop="alarmDnbp" label="下压" width="180">
            </el-table-column>
            <el-table-column prop="gmtCreate" label="日期"> </el-table-column>
            <el-table-column prop="id" label="操作">
              <template slot-scope="scope">
                <div>
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    circle
                    @click="deletebyid(scope.row.id)"
                  ></el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <!-- 血糖历史状态 -->

      <el-tab-pane label="血糖历史状态" name="2">
        <div class="title">
          <div class="label">选择时间：</div>
          <el-date-picker
            v-model="value"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
          <el-button type="primary" class="search-btn" @click="search"
            >查询</el-button
          >
        </div>
        <Glu :device="this.device" style="width: 80%" />
        <div style="width: 80%">
          <el-table :data="glualarm" style="width: 100%">
            <el-table-column prop="alarmGlu" label="血糖" width="180">
            </el-table-column>
            <el-table-column prop="gmtCreate" label="日期"> </el-table-column>
            <el-table-column prop="id" label="操作">
              <template slot-scope="scope">
                <div>
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    circle
                    @click="deletebyid(scope.row.id)"
                  ></el-button>
                </div> </template
            ></el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Bp from "./Bp";
import Glu from "./Glu";
import { dateFormat } from "../utils/utils.js";
export default {
  props: ["device"],
  components: { Bp, Glu },
  data() {
    return {
      value: "",
      activeName: "1",

      date: { startDate: "", endDate: "" },
      bpalarm: [],
      glualarm: [],
    };
  },

  mounted() {},
  methods: {
    deletebyid(id) {
      this.$http.post(`v1/bpalarmHistoryLog/delete?id=${id}`).then((res) => {
        this.getalarm();
      });
    },
    getalarm() {
      this.$http
        .get(
          `v1/bpalarmHistoryLog/list?deviceName=${this.device.deviceName}&pageNum=0&pageSize=5`
        )
        .then((res) => {
          this.bpalarm = res.data.records;
          console.log("a", this.bpalarm);
        });

      this.$http
        .get(
          `v1/glualarmHistoryLog/list?deviceName=${this.device.deviceName}&pageNum=0&pageSize=5`
        )
        .then((res) => {
          this.glualarm = res.data.records;
          console.log("a", this.glualarm);
        });
    },
    search() {
      this.date.startDate = dateFormat(this.value[0], "yyyy-MM-dd");
      this.date.endDate = dateFormat(this.value[1], "yyyy-MM-dd");
      this.$bus.$emit("date", this.date);
    },
  },
  watch: {
    device(newValue, oldValue) {
      this.getalarm();
    },
  },
};
</script>

<style scoped>
body {
  padding: 20px;
}
.detail-data {
  padding: 20px;
}
.title {
  display: flex;
  justify-content: flex-start;
}
.label {
  line-height: 36px;
  margin-right: 20px;
}
.search-btn {
  margin: 0 20px;
}
</style>